<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-08 19:42:41
 * @LastEditTime: 2020-06-25 22:01:51
 * @FilePath: \client\src\views\Share.vue
 * @Description: 分享界面
 -->
<template>
  <el-card>
    <el-form :model="formData" :rules="rules" ref="shareForm">
      <el-upload
        drag
        action="/api/v1/upload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        name="image"
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将图片拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input type="textarea" v-model="formData.desc"></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-input v-model="formData.label"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('shareForm')">发布</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import request from "@/http/request";
import { State } from "vuex-class";
import UserInfo from "../model/UserInfo";

@Component
export default class Share extends Vue {
  @State userInfo: UserInfo;
  formData = {
    title: "",
    label: "",
    desc: "",
    url: "",
    userId: 0
  };
  rules = {
    title: [{ required: true, message: "请输入图片标题", trigger: "blur" }],
    label: [{ required: true, message: "请输入标签", trigger: "blur" }],
    desc: [{ required: true, message: "请输入图片描述", trigger: "blur" }]
  };
  handleSuccess(res: any, file: any) {
    if (res.code === 0) {
      this.formData.url = res.data;
    } else {
      this.$message({
        showClose: true,
        message: "网络忙，上传失败！",
        type: "error"
      });
    }
  }
  handleError(res: any, file: any) {
    this.$message({
      showClose: true,
      message: "网络忙，上传失败！",
      type: "error"
    });
  }
  beforeUpload(file: any) {
    const typeLimit =
      ["image/png", "image/jpeg"].findIndex(ele => ele === file.type) != -1;
    const sizeLimit = file.size / 1024 / 1024 < 20;

    if (!typeLimit) {
      this.$message({
        showClose: true,
        message: "上传的图片只能是 JPG/PNG 格式!",
        type: "error"
      });
    }
    if (!sizeLimit) {
      this.$message({
        showClose: true,
        message: "上传头像图片大小不能超过 2MB!",
        type: "error"
      });
    }
    return typeLimit && sizeLimit;
  }
  submitForm(formName: string) {
    const re: any = this.$refs[formName];
    re.validate((valid: any) => {
      if (valid) {
        this.formData.userId = this.userInfo.id;
        request
          .postImage(this.formData)
          .then(res => {
            if (res.data.code === 0) {
              this.$message({
                showClose: true,
                message: "上传成功",
                type: "success"
              });
              setTimeout(() => {
                this.$router.replace("/details/" + res.data.data);
              }, 1000);
            } else {
              this.$message({
                showClose: true,
                message: "上传失败",
                type: "error"
              });
            }
          })
          .catch(() => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error"
            });
          });
      } else {
        this.$message({
          showClose: true,
          message: "请完整填写字段",
          type: "warning"
        });
        return false;
      }
    });
  }
}
</script>

<style scoped>
.el-card {
  margin-bottom: 10px;
}
</style>>
